<template>
  <div style="width: 100%" v-show="show">
    <el-collapse v-model="activeName">
      <el-collapse-item title="实现的接口" name="1">
        <avue-crud :option="{...option,selection:!disabled}"
                   :table-loading="loading"
                   :data="formDataAll.businessInterfaceList"
                   @selection-change="v=>selection=v"
                   ref="crud">
          <template slot="menuLeft">
            <el-button size="small" type="primary" :disabled="disabled"
                       @click="$refs['gdcd'].open(formDataAll.businessInterfaceList)">选择
            </el-button>
            <el-button size="small" :disabled="disabled" @click="remove">移除</el-button>
          </template>
          <template slot="attributes" slot-scope="{row}">
            {{ interfaceAttribute(row) }}
          </template>
        </avue-crud>
      </el-collapse-item>
      <el-collapse-item title="继承的接口" name="2">
        <avue-crud :option="opt(option)"
                   :table-loading="loading"
                   :data="tableData"
                   ref="crud">
          <template slot="attributes" slot-scope="{row}">
            {{ interfaceAttribute(row) }}
          </template>
        </avue-crud>
      </el-collapse-item>
    </el-collapse>
    <get-data-common-dialog title="选择功能"
                            ref="gdcd"
                            :param="{type:1}"
                            url="/api/manager-api/mx-interface/workingPage"
                            :column="EntityInterfaceOption.column"
                            @addToList="addToList">
    </get-data-common-dialog>
  </div>
</template>

<script>
import MsEditTable from "@/components/ms-edit-table.vue";

import GetDataCommonDialog from "@/views/DMDComponent/getDataCommonDialog.vue";
import * as entity from "@/api/modulManage/entity";

import index from "./index"

export default {
  name: "Interface",
  components: {GetDataCommonDialog, MsEditTable},
  inject: ["parentIdList", "EntityInterfaceOption", "temp"],
  mixins: [index],
  data() {
    return {
      tableData: [],
      activeName: ["1", "2"],
      loading: false,
      option: {
        calcHeight: 30,
        dialogWidth: 900,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        selection: true,
        labelWidth: 120,
        // menuWidth: 200,
        viewBtn: false,
        dialogClickModal: false,
        tabs: true,
        delBtn: false,
        addBtn: false,
        editBtn: false,
        refreshBtn: false,
        columnBtn: false,
        align: "center",
        menu: false,
        column: [
          {
            label: "中文名称",
            prop: "nameCn",
            cell: true,
          },
          {
            label: '英文名称',
            prop: 'nameEn',
            cell: true,
          },
          {
            label: '编码标识',
            prop: 'name',
            cell: true,
          },
          {
            label: "中文描述",
            prop: "describeCn",
            cell: true,
          },
          {
            label: "英文描述",
            prop: "describeEn",
            cell: true,
          },
          {
            label: "接口类型",
            prop: "type",
            cell: true,
            type: "select",
            dicData: [
              {label: "业务接口", value: 1},
              {label: "功能接口", value: 2},
            ]
          },
          {
            label: "接口属性",
            prop: "attributes",
            cell: true,
            slot: true,
          },
        ],
        afterColumn: [{
          label: "继承类型",
          prop: "typeNames",
        }]
      },

      selection: [],
    }
  },
  methods: {
    interfaceAttribute(row) {
      if (row.extAttributes && row.extAttributes.length > 0) {
        return row.extAttributes.map(i => i.nameCn).join("，");
      }
      return "";
    },
    addToList(list) {
      this.formDataAll.businessInterfaceList = list;
      this.$refs["gdcd"].close();
    },
    remove() {
      let ids = this.selection.map(i => i.oid);
      this.formDataAll.businessInterfaceList = this.formDataAll.businessInterfaceList.filter(i => !ids.includes(i.oid));
    },
    opt(option) {
      let o = JSON.parse(JSON.stringify(option));
      o.column = [...option.column, ...option.afterColumn];
      o.header = false;
      o.selection = false;
      return o;
    },
    getExtendsInterface() {
      entity.extends_data({type: "1", typeName: this.formDataAll.parentName, refType: this.temp}).then(res => {
        this.tableData = res.data.data;
      })
    }
  },
  watch: {
    "formDataAll.parentName": {
      handler(v) {
        if (v) {
          this.getExtendsInterface();
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style scoped>

</style>
